<template>
  <div>
    <div class="pic" @click="getSingerIntro(singerIntro.ting_uid)">
      <!-- <router-link :to="'/singer/singerinfo/singerintro/'+this.singerIntro.ting_uid"> -->
      <!-- 背景 -->
      <img class="headBg" :src="this.singerIntro.avatar_s180" alt />
      <!-- 歌手头像 -->
      <img class="headPortrait" :src="this.singerIntro.avatar_s180" alt />
      <!-- 歌手名称 -->
      <p>{{this.singerIntro.name}}</p>
      <!-- </router-link> -->
    </div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" @click="getSongPlay(item.song_id)" v-for="item in songList" :key="item.index">
        <a href="javascript:;">
          <div class="mui-media-body">
            <!-- 歌曲列表 -->
            <p class="mui-ellipsis musicList">{{item.title}}</p>
          </div>
        </a>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      songList: [], //存放歌手的所有歌曲信息
      singerIntro: [], //存放歌手简介
      songArr: [
        "2517",
        "7994",
        "1091",
        "45561",
        "2507",
        "245815",
        "1077",
        "1204",
        "1117",
        "82366"
      ]
    };
  },
  created() {
    this.getSongLIst();
  },
  mounted() {
    this.id = this.$route.params.id;
    //console.log(this.id);
  },
  methods: {
    getSongLIst() {
      for (var i = 0; i < this.songArr.length; i++) {
        const songsURL =
          this.HOST +
          "/v1/restserver/ting?method=baidu.ting.artist.getSongList&limits=10&tinguid=" +
          this.$route.params.id;
        this.$axios
          .get(songsURL)
          .then(res => {
            this.songList = res.data.songlist;
            this.singerIntro = res.data.artistinfo;
            // console.log(this.$route.ting_uid);
          })
          .catch();
      }
    },
    // 传递参数ting_uid
    getSingerIntro(id) {
      // 直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: `/singer/singerinfo/singerintro/${id}`
      });
    },
    // 获取歌曲id 传递歌曲id值
    getSongPlay(song_id){
      this.$router.push({
        path:`/playsongs/${song_id}`
      });
    },
  }
};
</script>
<style scoped>
.musicList {
  text-align: justify;
}
.mui-table-view-cell {
  width: 95%;
  text-align: center;
}
.pic {
  width: 100%;
  height: 130px;
  position: relative;
}
.headBg {
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  left: 0;
  top: 0;
  -webkit-filter: blur(5px);
  filter: blur(15px);
  transform: scale(1.1);
  position: absolute;
}
.headPortrait {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  z-index: 10;
  position: absolute;
  top: 15px;
  left: 40%;
}
.pic p {
  margin-top: 10px;
  position: absolute;
  top: 85px;
  left: 43%;
  z-index: 10;
  font-size: 16px;
  color: black;
}
</style>